<template>
  <div>
    <com-header :title="title" :zDepth="1"></com-header>
    <div class="content">
      <mu-list textline="two-line">
        <router-link
          tag='div'
          v-for="(item, index) in list"
          :key="item.id"
          :to="{name: 'Report', params: {id: item.id}}"
        >
          <mu-list-item avatar :ripple="false" button tag="div">
            <mu-list-item-action>
              <mu-avatar :size="56"><img :src="item.avatarImg"></mu-avatar>
            </mu-list-item-action>
            <mu-list-item-content>
              <mu-list-item-title>{{item.date}}</mu-list-item-title>
              <mu-list-item-sub-title>体检机构:{{item.hospital}}</mu-list-item-sub-title>
            </mu-list-item-content>
            <mu-list-item-action>
              <mu-button icon><mu-icon value="chevron_right" color="grey400"></mu-icon></mu-button>
            </mu-list-item-action>
          </mu-list-item>
          <mu-divider :key="index"></mu-divider>
        </router-link>
      </mu-list>
    </div>
  </div>
</template>

<script>
import ComHeader from '@/common/header/ComHeader'
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'List',
  components: {
    ComHeader
  },
  data () {
    return {
      title: '体检报告',
      list: []
    }
  },
  computed: {
    ...mapState(['token'])
  },
  methods: {
    HandleReportListData () {
      axios.get('/api/reportlist.do', {params: {token: this.token}})
        .then(this.getReportListDataSucc)
    },
    getReportListDataSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.list = data
      }
    }
  },
  activated () {
    this.HandleReportListData()
  }
}
</script>
<style lang="stylus" scoped>
  .header
    position: fixed
    left: 0
    top: 0
    right: 0
    height: 1.12rem
    .title
      text-align: center
      height: 1.12rem
  .content
    position: absolute
    top: 1.12rem
    left: 0
    right: 0
    bottom: 1.12rem
    overflow: hidden
    .mu-item-action
      margin-right: .2rem
</style>
